<template>
  <view class="quality-container">
    <!-- 区域水质地图 -->
    <view class="section water-map-section">
      <u-cell-group title="区域水质地图">
        <view class="map-container">
          <map
            class="quality-map"
            :latitude="latitude"
            :longitude="longitude"
            :markers="markers"
            @markertap="handleMarkerTap"
          ></map>
        </view>
        <view v-if="showTimeline" class="timeline">
          <view v-for="(record, index) in testRecords" :key="index" class="timeline-item">
            <text class="time">{{record.time}}</text>
            <text class="status">{{record.status}}</text>
          </view>
        </view>
      </u-cell-group>
    </view>

    <!-- 报告详情模块 -->
    <view class="section report-section">
      <u-cell-group title="水质报告">
        <view class="core-metrics">
          <view class="metric-card" @tap="toggleTDSTrend">
            <text class="metric-title">TDS值</text>
            <text class="metric-value">{{tdsValue}}</text>
            <text class="metric-unit">mg/L</text>
            <view v-if="showTDSTrend" class="trend-chart">
            </view>
          </view>
          <view class="metric-card">
            <text class="metric-title">PH值</text>
            <text class="metric-value">{{phRange}}</text>
            <text class="metric-status" :class="getPhStatusClass">标准范围内</text>
          </view>
          <view class="metric-card">
            <text class="metric-title">菌落总数</text>
            <text class="metric-value">{{bacteriaCount}}</text>
            <text class="metric-unit">CFU/mL</text>
          </view>
        </view>

        <view class="comparison-section">
          <view class="comparison-card">
            <text class="card-title">标准值对比</text>
            <view class="comparison-item" v-for="(item, index) in standardComparison" :key="index">
              <view class="item-header">
                <text class="item-name">{{item.name}}</text>
                <text class="item-status" :class="getComparisonStatus(item)">
                  {{ getComparisonText(item) }}
                </text>
              </view>
              <view class="comparison-bars">
                <view class="bar-row">
                  <text class="bar-label">标准值</text>
                  <view class="bar-container">
                    <view class="bar standard-bar" :style="{width: '100%'}">
                      <text>{{item.standard}}</text>
                    </view>
                  </view>
                </view>
                <view class="bar-row">
                  <text class="bar-label">实际值</text>
                  <view class="bar-container">
                    <view class="bar actual-bar" 
                          :style="{width: item.actualPercentage + '%'}"
                          :class="getBarClass(item)">
                      <text>{{item.actual}}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <view class="comparison-card">
            <text class="card-title">季度对比</text>
            <view class="quarterly-comparison">
              <view class="comparison-item" v-for="(item, index) in quarterlyComparison" :key="index">
                <text class="item-name">{{item.name}}</text>
                <view class="comparison-values">
                  <view class="quarter-value current">
                    <text class="label">本季度:</text>
                    <text :class="['value', item.trend]">{{item.current}}</text>
                  </view>
                  <view class="quarter-value previous">
                    <text class="label">上季度:</text>
                    <text class="value">{{item.previous}}</text>
                  </view>
                  <view class="trend-indicator" :class="item.trend">
                    <text class="trend-text">{{item.changeText}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </u-cell-group>
    </view>

    <!-- 订阅服务 -->
    <view class="section subscription-section">
      <u-cell-group title="订阅服务">
        <u-cell
          title="月度报告推送"
          @click="toggleMonthlyReport"
        >
          <template #right-icon>
            <switch :checked="monthlyReportEnabled" @change="toggleMonthlyReport" style="transform: scale(0.8);" />
          </template>
        </u-cell>
        <u-cell
          title="异常水质预警"
          @click="toggleQualityAlert"
        >
          <template #right-icon>
            <switch :checked="qualityAlertEnabled" @change="toggleQualityAlert" style="transform: scale(0.8);" />
          </template>
        </u-cell>
        <u-cell
          title="检测流程直播预约"
          @click="handleLiveBooking"
          isLink
        ></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 30.2746,
      longitude: 120.1551,
      markers: [],
      showTimeline: false,
      testRecords: [
        { time: '2025-02-18', status: '正常' },
        { time: '2025-02-15', status: '正常' },
        { time: '2025-02-12', status: '轻微异常' }
      ],
      tdsValue: '180mg/L',
      phRange: '6.8-7.2',
      bacteriaCount: '＜100 CFU/mL',
      showTDSTrend: false,
      standardComparison: [
        {
          name: 'TDS值',
          standard: '250mg/L',
          actual: '180mg/L',
          standardPercentage: 100,
          actualPercentage: 72,
          unit: 'mg/L'
        },
        {
          name: 'PH值',
          standard: '6.5-8.5',
          actual: '6.8-7.2',
          standardPercentage: 100,
          actualPercentage: 85,
          unit: ''
        }
      ],
      quarterlyComparison: [
        {
          name: 'TDS值',
          current: '180mg/L',
          previous: '195mg/L',
          trend: 'improved',
          changeText: '↓ 改善7.7%'
        },
        {
          name: 'PH值',
          current: '6.8-7.2',
          previous: '6.7-7.3',
          trend: 'stable',
          changeText: '→ 稳定'
        },
        {
          name: '菌落总数',
          current: '＜100 CFU/mL',
          previous: '＜120 CFU/mL',
          trend: 'improved',
          changeText: '↓ 改善16.7%'
        }
      ],
      monthlyReportEnabled: false,
      qualityAlertEnabled: true
    }
  },
  
  methods: {
    handleMarkerTap(marker) {
      this.showTimeline = true
    },
    
    toggleTDSTrend() {
      this.showTDSTrend = !this.showTDSTrend
    },
    
    toggleMonthlyReport(e) {
      this.monthlyReportEnabled = e.detail.value
    },
    
    toggleQualityAlert(e) {
      this.qualityAlertEnabled = e.detail.value
    },
    
    handleLiveBooking() {
      uni.showModal({
        title: '预约直播',
        content: '是否预约下次水质检测直播？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '预约成功',
              icon: 'success'
            })
          }
        }
      })
    },
    
    getComparisonStatus(item) {
      const actual = parseFloat(item.actual);
      const standard = parseFloat(item.standard);
      if (actual <= standard * 0.8) return 'status-excellent';
      if (actual <= standard) return 'status-good';
      return 'status-warning';
    },
    
    getComparisonText(item) {
      const status = this.getComparisonStatus(item);
      switch(status) {
        case 'status-excellent': return '优';
        case 'status-good': return '良';
        default: return '超标';
      }
    },
    
    getBarClass(item) {
      return {
        'bar-excellent': this.getComparisonStatus(item) === 'status-excellent',
        'bar-good': this.getComparisonStatus(item) === 'status-good',
        'bar-warning': this.getComparisonStatus(item) === 'status-warning'
      }
    }
  },
  
  computed: {
    getPhStatusClass() {
      const [min, max] = this.phRange.split('-').map(Number);
      if (min >= 6.5 && max <= 8.5) return 'status-good';
      return 'status-warning';
    }
  }
}
</script>

<style lang="scss">
.quality-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.section {
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  
  &.water-map-section {
    .map-container {
      margin: 0;
      width: 100%;
      height: 400rpx;
      
      .quality-map {
        width: 100%;
        height: 100%;
      }
    }
    
    .timeline {
      padding: 20rpx;
      
      .timeline-item {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .time {
          margin-right: 20rpx;
          color: #666;
          font-size: 24rpx;
        }
        
        .status {
          color: #333;
          font-size: 24rpx;
        }
      }
    }
  }
}

.core-metrics {
  display: flex;
  padding: 20rpx;
  gap: 20rpx;
  
  .metric-card {
    flex: 1;
    background: #f8f9fa;
    padding: 20rpx;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .metric-title {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 10rpx;
    }
    
    .metric-value {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 5rpx;
    }
    
    .metric-unit {
      font-size: 20rpx;
      color: #999;
    }
    
    .metric-status {
      font-size: 20rpx;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      margin-top: 8rpx;
      
      &.status-good {
        background: rgba(40, 167, 69, 0.1);
        color: #28a745;
      }
      
      &.status-warning {
        background: rgba(255, 193, 7, 0.1);
        color: #ffc107;
      }
    }
  }
}

.comparison-section {
  padding: 20rpx;
  
  .comparison-card {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
    
    .card-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .comparison-item {
      margin-bottom: 30rpx;
      .item-name {
          font-size: 26rpx;
          color: #666;
        }
        
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .item-name {
          font-size: 26rpx;
          color: #666;
        }
        
        .item-status {
          font-size: 24rpx;
          padding: 4rpx 16rpx;
          border-radius: 20rpx;
          
          &.status-excellent {
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
          }
          
          &.status-good {
            background: rgba(23, 162, 184, 0.1);
            color: #17a2b8;
          }
          
          &.status-warning {
            background: rgba(255, 193, 7, 0.1);
            color: #ffc107;
          }
        }
      }
      
      .comparison-values {
        display: flex;
        justify-content: space-between;
        margin: 15rpx 0;
        padding: 15rpx;
        background: #f8f9fa;
        border-radius: 8rpx;
        
        .value-item {
          display: flex;
          align-items: center;
          
          .label {
            font-size: 24rpx;
            color: #666;
            margin-right: 10rpx;
          }
          
          .value {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            
            &.status-excellent {
              color: #28a745;
            }
            
            &.status-good {
              color: #17a2b8;
            }
            
            &.status-warning {
              color: #ffc107;
            }
          }
        }
      }
      
      .comparison-bars {
        margin-top: 20rpx;
        
        .bar-row {
          display: flex;
          align-items: center;
          margin-bottom: 15rpx;
          
          .bar-label {
            width: 100rpx;
            font-size: 24rpx;
            color: #666;
            flex-shrink: 0;
          }
          
          .bar-container {
            flex: 1;
            height: 36rpx;
            background: #f8f9fa;
            border-radius: 18rpx;
            overflow: hidden;
            position: relative;
          }
          
          .bar {
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            font-size: 24rpx;
            color: #fff;
            transition: all 0.3s ease;
            position: absolute;
            left: 0;
            top: 0;
            
            text {
              position: relative;
              z-index: 1;
            }
          }
          
          .standard-bar {
            background: #17a2b8;
          }
          
          .actual-bar {
            &.bar-excellent {
              background: #28a745;
            }
            
            &.bar-good {
              background: #17a2b8;
            }
            
            &.bar-warning {
              background: #ffc107;
            }
          }
        }
      }
    }
  }
  
  .quarterly-comparison {
    .comparison-item {
      margin-bottom: 25rpx;
      
      .comparison-values {
        display: flex;
        align-items: center;
        gap: 20rpx;
        
        .quarter-value {
          flex: 1;
          
          &.current .value {
            font-weight: bold;
          }
          
          .label {
            font-size: 24rpx;
            color: #666;
            margin-right: 10rpx;
          }
          
          .value {
            font-size: 26rpx;
            color: #333;
            
            &.improved {
              color: #28a745;
            }
            
            &.stable {
              color: #17a2b8;
            }
            
            &.declined {
              color: #dc3545;
            }
          }
        }
        
        .trend-indicator {
          padding: 4rpx 12rpx;
          border-radius: 16rpx;
          
          &.improved {
            background: rgba(40, 167, 69, 0.1);
            .trend-text { color: #28a745; }
          }
          
          &.stable {
            background: rgba(23, 162, 184, 0.1);
            .trend-text { color: #17a2b8; }
          }
          
          &.declined {
            background: rgba(220, 53, 69, 0.1);
            .trend-text { color: #dc3545; }
          }
          
          .trend-text {
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
</style>
